<template>
  <el-form :inline="true" class="demo-form-inline" :disabled="forbidden" :setDefault="setDefault">
    <el-form-item label="商品分类">
      <el-select
        :value="value"
        placeholder="请选择分类"
        v-model="categoryId"
        @change="categoryChange"
      >
        <el-option
          :label="item.name"
          :value="item.categoryId"
          v-for="item in categoryList"
          :key="item.categoryId"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import { getCategoriesListRequest } from '../../network/goods'

export default {
  name: 'CategorySelect',
  model: {
    prop: 'value',
    event: 'categoryChange'
  },
  props: [
    'value',
    'forbidden',
    'setDefault'
  ],
  data () {
    return {
      categoryList: [],
      categoryId: null
    }
  },
  // 组件挂载完毕：向服务器发请求，获取相应分类的数据
  mounted () {
    // 获取分类的数据
    this.getCategoryList()
  },
  methods: {
    // 获取分类列表
    getCategoryList () {
      getCategoriesListRequest({ page: 1, size: 100 }).then(res => {
        if (res.status !== 200) {
          return this.alertMessage('获取分类列表失败', 'error')
        }
        this.categoryList = res.data.data.list
        if (this.categoryList.length > 0 && this.setDefault) {
          this.categoryId = this.setDefault
        }
      })
    },
    categoryChange () {
      this.$emit('categoryChange', this.categoryId)
    }
  }
}
</script>

<style scoped>

</style>
